<template>
    <view class="container" :style="themeColor">
        <header-bar :config="config" @rightClick="rightClick"></header-bar>
        <tab-bar-scroll class="tab-bar-scroll-bg" :tabs="tabs" @clickTab="clickTab"
            :tabIndex="tabIndex"></tab-bar-scroll>
        <search-bar :placeholderText="placeholderText" @searchFn="searchFn">
        </search-bar>
        <history-filter @doFilter="doFilter" :RecordAmout="RecordAmout" :State="FilterState" />
        <view v-if="!isloadding">
            <swiper class="product-main-list" :style="{ height: listHeight }" :current="tabIndex"
                @change="swiperChange">
                <swiper-item v-for="(itemt, i) in tabs">
                    <history-goods-list v-if="load" ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs"
                        :height="listHeight" :State="itemt.State" :requestData="requestData" @getcount="getcount">
                    </history-goods-list>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import historyGoodsList from "@/pages_me/components/billing/history-goods-list.vue"
import tabBarScroll from "@/components/common/tab-bar-scroll.vue"
import historyFilter from "@/pages_me/components/billing/history-filter.vue"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import searchBar from "@/components/common/search-bar.vue"
export default {
    components: {
        historyGoodsList,
        tabBarScroll,
        historyFilter,
        searchBar
    },
    data() {
        return {
            config: {
                title: "开票历史",
                back: true,
                centerSlot: true,
                barPlaceholder: true,
                rightSlot: true,
                rightBtns: [
                    {
                        id: 1,
                        btnType: 1,
                        type: "申请开票",
                    },
                ],
            },
            current: 0,
            tabs: [
                {
                    title: "已开发票",
                    State: 1,
                },
                {
                    title: "开票申请中",
                    State: 0,
                },
                {
                    title: "开票被驳回",
                    State: 2,
                },
            ],
            placeholderText: "请输入单号",
            isloadding: false,
            listHeight: 0,
            tabIndex: 0, // 当前tab的下标
            load: false,
            searchKey: "",
            requestData: {
                searchKey: "",
                startTime: "",
                endTime: "",
                timeSearchType: 0,
                businessId: 0,
            },
            FilterState: "1", // 订单发票列表 State:0申请中，1已开票，2已驳回
            RecordAmout: 0,
        }
    },
    watch: {
        //监听更新
        getUpReturnOrderView(e) {
            this.refresh()
        },
    },
    computed: {
        ...mapGetters(["getUpReturnOrderView"]),
    },
    // onLoad(){
    //     this.getamount()
    // },
    mounted() {
        this.getListHeight()
    },
    methods: {
        rightClick(data) {
            console.log(data)
            // /pages_me/packet/billing/creatBilling?type=info&form=me
            this.easyGoTo("/pages_me/packet/billing/index")
        },
        getListHeight(element) {
            //获取列表高度
            getElementHeight(this, ".product-main-list", (e) => {
                //再获取列表高度
                this.listHeight = e - uni.upx2px(30) + "px"
                this.load = true
            })
        },
        clickTab(index) {
            if (this.tabIndex != index) {
                this.tabIndex = index
            }
            this.refresh()
        },
        swiperChange(e) {
            let index = e.detail.current
            if (index === 0) {
                this.FilterState = "1"
            } else if (index === 1) {
                this.FilterState = "0"
            } else {
                this.FilterState = "2"
            }
            this.tabIndex = index
            this.clickTab(this.tabIndex)
        },
        //筛选
        doFilter(data) {
            this.requestData.startTime = data.startDate ? data.startDate + "T00:00:00.000Z" : ""
            this.requestData.endTime = data.endDate ? data.endDate + "T23:59:59.000Z" : ""
            this.refresh()
        },
        refresh() {
            this.isloadding = true
            this.$nextTick(() => {
                this.isloadding = false
            })
        },
        getcount(data) {
            this.RecordAmout = data
        },
        searchFn(searchKey) {
            this.requestData.orderNo = searchKey
            this.refresh()
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
}

.bottom-bar {
    .btn {
        width: 100%;
        margin-left: 0;
        height: 88rpx;
        font-size: 32rpx;
    }
}

.tab-bar-scroll-bg {
    background: #ffffff;
}
</style>
